<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IO通信设计模式组件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="<c:url value='/css/bootstrap.min.css'/>" rel="stylesheet">
<link href="<c:url value='/css/bootstrap-responsive.css'/>"
	rel="stylesheet">

</head>
<body>
	<div class="container">
		<div class="tabbable" style="padding-top: 50px;">
			<div class="tabbable" style="margin-bottom: 18px;">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab2" data-toggle="tab">IO通信</a></li>
				</ul>
				<div class="tab-content"
					style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">

					<div class="tab-pane active form-horizontal" id="tab2">
						<form class="form-horizontal" action="<%=request.getContextPath()%>/ioDesignPattern/add"
							method="post">
							<input type="hidden" name="dpiFileName" value="${dpiFileName}"></input>
							<input type="hidden" name="dpiName" value="${dpiName}"></input>
							<input type="hidden" name="dpcUri" value="${dpcUri}"></input>

							<div class="control-group span9">
								<label class="control-label" for="">设计模式文件名称</label>
								<div class="controls">
									<span class="uneditable-input input-xlarge"><c:out
											value="${dpiFileName}"></c:out> </span>
								</div>
							</div>
							<div class="control-group span9">
								<label class="control-label" for="">设计模式实例名称</label>
								<div class="controls">
									<span class="uneditable-input input-xlarge"><c:out
											value="${dpiName}"></c:out></span>
								</div>
							</div>
							<div class="control-group span9">
								<label class="control-label" for="IO_device">IO设备</label>
								<div class="controls">
									<div class="btn-group">
										<button class="btn btn-primary"
											data-target="#add_io_device_panel" data-toggle="modal">增加</button>
									</div>
									<input type="hidden" name="devices" value="" />
									<table class="table table-bordered table-striped table-hover"
										id="io_devices_table">
										<thead>
											<tr>
												<th>#</th>
												<th>设备</th>
												<th>内部总线</th>
												<th>设备号</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>
								</div>
							</div>

							<div class="control-group span9">
								<div class="controls">
									<button type="submit" class="btn btn-primary">确认</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- /tabbable -->
	</div>

	<div class="modal hide fade" id="add_io_device_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">&times;</button>
			<h3>添加IO设备</h3>
		</div>
		<div class="modal-body form-horizontal">
			<div class="control-group">
				<label class="control-label" for="io_device">IO设备</label>
				<div class="controls">
					<select id="io_device">
						<c:forEach items="${equipments}" var="equipment">
							<option value="${equipment.uri}">
								<c:out value="${equipment.name}"></c:out>
							</option>
						</c:forEach>									
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="device_num">设备号</label>
				<div class="controls">
					<input type="text" id="device_num" placeholder="0">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="bus_type">内部总线类型</label>
				<div class="controls">
					<select id="bus_type">
						<c:forEach items="${equipments}" var="equipment">
							<option value="${equipment.uri}">
								<c:out value="${equipment.name}"></c:out>
							</option>
						</c:forEach>									
					</select>
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="add_io_device_btn">保存</button>
		</div>
	</div>

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="<c:url value='/js/jquery.min.js'/>"></script>
	<script src="<c:url value='/js/bootstrap.min.js'/>"></script>
	<script src="<c:url value='/js/io_dp_component.js'/>"></script>
	<script src="<c:url value='/js/bootstrap.file-input.js'/>"></script>

</body>
</html>